<template>
    <div class="order">
        <el-card class="box-card">
            <div slot="header">
                <span class="title">货品信息</span>
            </div>
            <el-form label-width="80px" label-position="left">
                <el-form-item label="货品名称">{{orderData.product_name}}
                </el-form-item>
                <el-form-item label="规格">{{orderData.specification.price}}元/{{orderData.specification.name}}
                </el-form-item>
                <el-form-item label="数量">{{orderData.number}}斤
                </el-form-item>
                <el-form-item label="#运费">
                </el-form-item>
                <el-form-item label="总价">{{orderData.totalPrice}}元
                </el-form-item>
                <el-form-item label="#应付金额">
                </el-form-item>
                <el-form-item label="优惠申请"><el-switch ></el-switch>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="box-card">
            <div slot="header">
                <span class="title">收货地址</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="toAdd">添加地址</el-button>
            </div>
            <el-select v-model="selectedAddressId" placeholder="请选择">
                <el-option
                v-for="item,i in addressList"
                :key="i"
                :label="item.receiver_name + ' ' + item.receiver_phone + ' ' + item.receiver_area + item.receiver_deatailed_address"
                :value="item.id">
                </el-option>
            </el-select>
            <!-- <el-table :header-cell-style="{ background: '#f5f7fa' }"  :key="key" :data="showAddress">
                <el-table-column prop="receiver_name" label="收货人" width="100"> </el-table-column>
                <el-table-column prop="receiver_phone" label="手机号码"> </el-table-column>
                <el-table-column prop="" label="地址">
                    <template slot-scope="scope">
                        {{scope.row.receiver_area}} {{scope.row.receiver_deatailed_address}}
                    </template>
                </el-table-column>
            </el-table> -->
        </el-card>
        <div class="summit">
            <el-button type="primary" @click="summitOrder">提交订单</el-button>
        </div>
    </div>
</template>

<script>
export default {
    name:'Order',
    data() {
        return {
            addressList:[],
            selectedAddressId: undefined,
            key:0,

            purchaser_id:'',
        }
    },
    computed:{
    },
    methods:{
        toAdd() {
            this.$router.push('/person/address')
        },
        summitOrder(){
            let delivery_address_id = this.addressList.filter(item => item.id == this.selectedAddressId)[0].id
            this.$API.summitProductOrder({
                "purchaser_id": this.purchaser_id,
                "delivery_address_id": delivery_address_id,
                "product_specification_id": this.orderData.specification.id,
                "trade_volume": this.orderData.number,
                "total_price": this.orderData.totalPrice,
                "deal_status": 0,
                "order_start_time": new Date(),
                "order_end_time": null
            }).then(response => {
                if(response.status == 201) {
                    this.$message({
                        message: '订单已提交',
                        type: 'success'
                    })
                    this.$emit('quitOrderPage')
                    this.$router.push({
                        name: '/Pay',
                        params: {
                            oid: response.data.id
                        }
                    })
                }
            })
        },
        async load() {
            await this.$API.getPurchaser().then(res => {
                if (res.status == 200) {
                    let aid = this.$store.state.user.account_id
                    for (let obj of res.data) {
                        if (obj.account_id == aid) {
                           this.purchaser_id = obj.id
                            return this.$API.getDeliveryAddress()
                        }
                    }
                }
            }).then(res => {
                if (res.status == 200) {
                    this.addressList = []
                    for (let obj of res.data) {
                        if (obj.purchaser_id == this.purchaser_id) {
                            this.addressList.push(obj)
                            if (obj.is_default_address) this.selectedAddressId = obj.id
                            this.key = Math.random()
                        } 
                    }
                    if (!this.selectedAddressId) this.selectedAddressId = this.addressList[0].id
                }
            })
        }
    },
    props:{
        orderData:Object
    },

    created() {
        this.load()
    }
}
</script>

<style lang="less" scoped>
.title{
    color: @color-theme;
}
/deep/ .el-card__body{
    max-width: 760px;
}
.el-form{
    max-width: 760px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.el-form-item{
    min-width: 250px;
}
.summit{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.el-select{
    width: 100%;
}

</style>